import {Component} from "@angular/core";

@Component({
    selector: 'template-syntax',
    templateUrl: 'app/template-syntax.component.html'
})
export class TemplateSyntaxComponent {
    title = "Hero"
    evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax'
    heroImageUrl = "http://tx.haiqq.com/qqtouxiang/uploads/2015-05-15/164708733.jpg"
    emptyImageUrl = null
    actionName = "action"
    badCurly = "bad-curly"
    isSpecial = true
    isUnchanged = true
    canSave = true

    heroes = [{
        id: 1,
        name: 'A'
    }, {
        id: 2,
        name: 'B'
    }, {
        id: 3,
        name: 'C'
    }]

    setClasses() {
        let classes = {
            saveable: this.canSave,
            modified: !this.isUnchanged,
            special: this.isSpecial
        }
        return classes
    }

    setStyles() {
        let styles = {
            'font-style': this.canSave ? 'italic' : 'normal',
            'font-weight': !this.isUnchanged ? 'bold' : 'normal',
            'font-size': this.isSpecial ? '24px' : '8px'
        }
        return styles
    }

    trackByHeroes(index, hero) {
        return hero.id
    }

}